<template>
  <div class="points-detail">
    <!-- 顶部导航栏 -->
    <div class="nav-bar">
      <van-nav-bar
        title="积分明细"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    
    <!-- 积分总数展示区域 -->
    <div class="points-header">
      <div class="points-total">{{ totalPoints }}</div>
      <div class="points-desc">积分的更新可能存在延迟</div>
    </div>

    <!-- 积分记录列表 -->
    <div class="points-list">
      <div class="points-title">积分记录</div>
      <div class="points-item" v-for="(item, index) in pointsList" :key="index">
        <div class="item-left">
          <div class="item-title">{{ item.type }}</div>
          <div class="item-time">{{ formatDate(item.time) }}</div>
        </div>
        <div class="item-points" :class="{ 'positive': item.change > 0 }">
          {{ item.points > 0 ? '+' + item.change : item.change }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { apiGetPointDetails } from '../api/user'
import { onMounted } from 'vue'
import { formatDate} from '../utils/date'
const router = useRouter()

// 总积分
const totalPoints = ref(8910)

// 积分记录列表
const pointsList = ref([
  {
    title: '取消兑礼',
    time: '2022-12-21 12:33:09',
    points: 6000
  },
  {
    title: '兑礼消耗',
    time: '2022-12-21 12:33:09',
    points: -6000
  },
  {
    title: '订单积分',
    time: '2022-12-21 12:33:09',
    points: 800
  },
  {
    title: '积分清零',
    time: '2022-12-21 12:33:09',
    points: -120
  },
  {
    title: '生日赠分',
    time: '2022-12-21 12:33:09',
    points: 1000
  }
])
const userId = localStorage.getItem('userId')
const getPointsList = async () => {
    try {

        const data = await apiGetPointDetails(userId)
        console.log(data);
        
        pointsList.value = data
    } catch (err) {
        console.log(err)
    }
}

onMounted(() => {
    getPointsList()
})

// 返回上一页
const onClickLeft = () => {
  router.back()
}
</script>

<style scoped>
.points-detail {
  min-height: 100vh;
  background: #f5f5f5;
}

.points-header {
  background: linear-gradient(to right, #ff9b33, #ff6b5d);
  padding: 30px 20px;
  color: #fff;
}

.points-total {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 8px;
}

.points-desc {
  font-size: 14px;
  opacity: 0.8;
}

.points-list {
  background: #fff;
  margin-top: 10px;
}

.points-title {
  padding: 15px;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 1px solid #f5f5f5;
}

.points-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #f5f5f5;
}

.item-title {
  font-size: 15px;
  margin-bottom: 5px;
}

.item-time {
  font-size: 12px;
  color: #999;
}

.item-points {
  font-size: 16px;
  color: #ff4d4f;
}

.item-points.positive {
  color: #52c41a;
}
</style> 